<template>
  <a-card>
    <p :style="{ color: '#096dd9', textAlign: 'center', marginTop: '30px' }">
      ⚠️注意：如您需要修改密码，则需要填写新密码和邮箱验证码。<br />验证码会发送到您绑定的邮箱，验证码有效时间为30min，请注意查收～
    </p>
    <br />
    <a-form
      :model="modifyPwdState"
      name="basic"
      autocomplete="off"
      :style="{
        width: '60%',
        maxWidth: '500px',
        margin: '0 auto',
        marginBottom: '100px'
      }"
    >
      <a-form-item
        label="新密码"
        name="newPassword"
        :rules="[{ required: true, message: '请输入新密码' }]"
      >
        <a-input-password v-model:value="modifyPwdState.newPassword">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item
        label="验证码"
        name="verifyCode"
        :rules="[{ required: true, message: '请输入邮箱验证码' }]"
      >
        <a-input-group compact>
          <a-input
            v-model:value="modifyPwdState.verifyCode"
            style="width: calc(100% - 100px)"
          >
            <template #prefix>
              <SendOutlined class="site-form-item-icon" />
            </template>
          </a-input>
          <a-button
            type="default"
            style="width: 100px"
            @click="send"
            :disabled="isSend"
            >{{ sendMsg }}</a-button
          >
        </a-input-group>
      </a-form-item>
      <a-form-item class="form-button-box">
        <a-button
          @click="modifyPassword"
          type="primary"
          class="form-button"
          :disabled="disabled"
          >提交</a-button
        >
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from 'vue';
import { modifyPassword } from '@/apis/user';
import { sendVerifyCode } from '@/apis/email';
import { message } from 'ant-design-vue';
import { UserModule } from '@/store/modules/user';
import { LockOutlined, SendOutlined } from '@ant-design/icons-vue';

interface ModifyPwdState {
  email: string;
  newPassword: string;
  verifyCode: string;
}

export default defineComponent({
  components: {
    LockOutlined,
    SendOutlined
  },
  data() {
    return {
      isSend: false,
      sendMsg: '发送验证码'
    };
  },
  setup() {
    const { email } = UserModule;
    const modifyPwdState = reactive<ModifyPwdState>({
      email,
      newPassword: '',
      verifyCode: ''
    });

    const disabled = computed(() => {
      return !(modifyPwdState.newPassword && modifyPwdState.verifyCode);
    });

    return {
      email,
      modifyPwdState,
      disabled
    };
  },
  methods: {
    modifyPassword() {
      const { email, newPassword, verifyCode } = this.modifyPwdState;
      modifyPassword(email.trim(), newPassword.trim(), verifyCode.trim()).then(
        (res) => {
          message.success(res.msg);
          this.modifyPwdState = { email, newPassword: '', verifyCode: '' };
        }
      );
    },
    send() {
      if (!this.modifyPwdState.email) {
        message.error('请填写邮箱后获取验证码！');
      } else if (
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(
          this.modifyPwdState.email
        ) == false
      ) {
        message.error('请填写正确的邮箱号后获取验证码！');
      } else {
        sendVerifyCode(this.modifyPwdState.email).then((res) => {
          this.isSend = true;
          let timer = 60;
          this.sendMsg = timer + 's';
          const timeFun = setInterval(() => {
            --timer;
            this.sendMsg = timer + 's';
            if (timer == 0) {
              this.isSend = false;
              this.sendMsg = '重新发送';
              clearInterval(timeFun);
            }
          }, 1000);
        });
      }
    }
  }
});
</script>

<style scoped lang="less">
.form-button-box {
  text-align: center;
  .form-button {
    width: 40%;
    max-width: 200px;
  }
}
</style>
